<!-- 库存量预警设置 -->
<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
      <el-button v-if="permissions.eims_eimsinventorywarning_edit" icon="el-icon-edit" type="primary" @click="batchEdit()">批量修改</el-button>
      <el-button v-if="permissions.eims_eimsinventorywarning_del" icon="el-icon-delete" type="primary" @click="batchDel()">批量删除</el-button>
      <el-button v-if="permissions.eims_eimsinventorywarning_add" icon="el-icon-setting" type="primary" @click="inventoryWarningSetting('optic')">镜片类库存量预警设置</el-button>
      <el-button v-if="permissions.eims_eimsinventorywarning_add" icon="el-icon-setting" type="primary" @click="inventoryWarningSetting('inoptic')">非镜片类库存量预警设置</el-button>
    </el-button-group>
      <el-form inline :model="dataForm" label-width="100px" @keyup.enter.native="searchHandle">
        <el-form-item label="商品代码">
          <el-input v-model="dataForm.code"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="dataForm.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="商品类别">
          <el-select v-model="dataForm.ctgId">
            <el-option v-for="item in ctgOptions" :value="item.value" :label="item.name" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="制造商">
          <el-input  v-model="dataForm.supplyName" placeholder="请选择">
            <el-button slot="append" @click="chooseSupply">选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="商品品种" prop="brandName">
          <el-input v-model="dataForm.brandName" readonly="readonly">
            <el-button slot="append" @click="getBrandList">选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="仓位">
          <el-select v-model="dataForm.stockId">
            <el-option v-for="item in stockOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="avue-crud">
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="handleSelectionChange" :max-height="tableHeight">
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column prop="code" label="商品编码" width="160"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称"></el-table-column>
          <el-table-column prop="supplyName" label="制造商" width="160"></el-table-column>
          <el-table-column prop="stockName" label="仓位" width="160"></el-table-column>
          <el-table-column prop="inventoryTop" label="库存上限" width="80"></el-table-column>
          <el-table-column prop="inventoryFloor" label="库存下限" width="80"></el-table-column>
          <el-table-column prop="redAlert" label="红色预警" width="80"></el-table-column>
          <el-table-column label="操作" width="80" fixed="right">
            <template slot-scope="scope">
              <el-button v-if="permissions.eims_eimsinventorywarning_edit" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next">
        </el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
      <!-- 弹窗，批量修改 -->
      <batch-edit v-if="batchEditVisible" ref="batchEdit" @updateBatch="getDataList"></batch-edit>
      <!-- 弹窗, 镜片类库存预警设置 -->
      <optic-set v-if="opticSetVisible" ref="opticSetting" @opticDataSetting="getDataList"></optic-set>
      <!-- 弹窗,非镜片类库存预警设置 -->
      <inoptic-set v-if="inopticSetVisible" ref="inopticSetting" @inopticDataSetting="getDataList"></inoptic-set>
            <!-- 弹窗，查找制造商 -->
    <supply-search v-if="supplyVisible" ref="supplySearch" @refreshData="updateSearchForm"></supply-search>
    <!-- 弹窗，查询商品品种 -->
      <select-brand v-if="selectBrandVisible" ref="selectBrand" @refreshData="updateFormBrand"></select-brand>
  </div>
</template>

<script>
  import {warningSettingGetList,warningSettingBatchDel} from '@/api/eims/warning-setting'
  import TableForm from './form'
  import BatchEdit from './edit'
  import OpticSet from './optic'
  import InopticSet from './inoptic'
  import {mapGetters} from 'vuex'
  import { getCtgDataList } from "@/api/eims/check";
  import SupplySearch from '../storage/supply-search'
  import SelectBrand from '../storage/SearchBrand'
  import {getStockList} from '@/api/eims/stock'
  import {filterParams} from '@/util/tools'

  export default {
    data () {
      return {
        dataForm: {
          supplyName: '',
          brandName: ''
         },
        dataList: [],
        ids: [],
        pageIndex: 1,
        pageSize: 200,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        batchEditVisible: false,
        opticSetVisible: false,
        inopticSetVisible: false,
        ctgOptions: [],
        stockOptions: [],
        supplyVisible: false,
        selectBrandVisible: false
      }
    },
    components: { TableForm, BatchEdit, OpticSet, InopticSet,SupplySearch,SelectBrand },
    created () {
      this.getDataList(),
      this.getGoodsCtgList(),
      this.getStock()
    },
    computed: {
      ...mapGetters(['permissions']),
      tableHeight: function(){
        return window.innerHeight - 260
      }
    },
    methods: {
      //  查询数据
      searchHandle() {
        this.pageIndex = 1
        this.getDataList()
      },
      //  清空搜索表单
      searchReset() {
        for (let key in this.dataForm) {
          this.dataForm[key] = "";
        }
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        let params1 = { current: this.pageIndex, size: this.pageSize }
        let params2 = filterParams(this.dataForm)
        warningSettingGetList(Object.assign(params1,params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      handleSelectionChange(val) {
        let list = []
        val.forEach(item => { list.push(item.id) })
        this.ids = list
      },
      // 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 批量修改
      batchEdit() {
        if(this.ids.length) {
          this.batchEditVisible = true
          this.$nextTick(() => {
            this.$refs.batchEdit.init(this.ids)
          })
        }
      },
      // 批量删除
      batchDel() {
        if(this.ids.length) {
          this.$confirm('库存量预警设置是否确认全部删除','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(() => {
            return warningSettingBatchDel(this.ids)
          }).then(response => {
            if(response.data.code == '0'){
              this.$message.success('删除成功')
              this.getDataList()
            }else{
              this.$message.error(response.data.msg)
            }
          })
        }
      },
      // 库存预警设置
      inventoryWarningSetting(nameStr) {
        if(nameStr == 'optic'){   // 镜片类库存预警设置
          this.opticSetVisible = true
          this.$nextTick(() => { this.$refs.opticSetting.init() })
        } else {    // 非镜片类库存预警设置
          this.inopticSetVisible = true
          this.$nextTick(() => { this.$refs.inopticSetting.init() })
        }
      },
      //获取商品类别
      getGoodsCtgList() {
        getCtgDataList().then(response => {
          if(response.data.code == '0'){
            let list = response.data.data.records
            let options = []
            list.forEach(item => {
              options.push({ value: item.id, name: item.name })
            })
            this.ctgOptions = options
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //获取制造商列表
      chooseSupply() {
        this.supplyVisible = true
        this.$nextTick(() => {
          this.$refs.supplySearch.init(this.dataForm.ctgId)
        })
      },
      updateSearchForm(data) {
        this.dataForm.supplyId = data.id
        this.dataForm.supplyName = data.name
        this.dataForm.brandId = ''
        this.dataForm.brandName= ''
      },
      // 获取商品品种信息
      getBrandList() {
        if (!this.dataForm.ctgId) {
          this.$message.warning('请选择商品类别')
          return false
        }
        if (!this.dataForm.supplyId) {
          this.$message.warning('请选择制造商')
          return false
        }
        let data = {
          ctgId: this.dataForm.ctgId,
          supplyId: this.dataForm.supplyId
        }
        this.selectBrandVisible = true
        this.$nextTick(() => {
          this.$refs.selectBrand.init(data)
        })
      },
      //  更新表单品种信息
      updateFormBrand(data) {
        this.dataForm.brandId = data.id
        this.dataForm.brandName = data.name
        this.dataForm.brandCode = data.code
        this.dataForm.name = data.name
        this.dataForm.unitType = data.unitType
      },
      //  获取仓位列表
      getStock() {
        getStockList().then(response => {
          if(response.data.code == '0'){
            this.stockOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
    }
  }
</script>
